<!DOCTYPE html>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="data++">count++</button>
  
  <count-template :count="data"></count-template>
  <count-template :count="data"></count-template>
</div>

<script>
var countTemplate = {
  props: {
    count: {
      type: Number,
      default: 0,
    }
  },
  template: '<div>{{ count }}</div>',
  watch: {
    count() {
      console.log('count的内容发生了变化')
    },
  }
}
  
Vue.component('countTemplate', countTemplate)
  
var vm = new Vue({
  el: '#app',
  data: {
    data: 0, // 计数器
  },
})
</script>

<script src="">
// 传递给组件的数据是响应式的, 数据源的内容发生改变的时候, 组件内对应的数据和内容也会发生改变
</script>
